<!-- 产能看板 -->
<template>
	<div id="productionBoard">
		<a-card :bordered="false">
			<!-- <p class="update-step">
				<span>当前更新频率:&nbsp;&nbsp;</span>
				<span v-if="!isEditUpdate">{{ updateStep }}</span>
				<a-input v-else width="50" type="number" min="1" v-model:value="updateStep" />
				<span>&nbsp;&nbsp;分钟 / 次</span>
				<a-button type="link" @click="editUpdateStep"> {{ isEditUpdate ? '保存' : '修改' }} </a-button>
			</p> -->
			<a-form ref="searchFormRef" name="advanced_search" :model="searchFormState" class="ant-advanced-search-form">
				<a-row :gutter="24">
					<a-col span="6">
						<a-form-item label="所属项目" name="belongProject">
							<ProjectMultiSelect v-model:value="searchFormState.belongProject" />
						</a-form-item>
					</a-col>
					<a-col span="6">
						<a-form-item label="调解员" name="agentNum">
							<a-input v-model:value="searchFormState.agentNum" />
						</a-form-item>
					</a-col>
					<a-col span="6">
						<a-form-item label="日期" name="currentTime">
							<a-date-picker
								v-model:value="searchFormState.currentTime"
								valueFormat="YYYY-MM-DD"
								:allow-clear="false"
								style="width: 100%"
							/>
						</a-form-item>
					</a-col>
					<a-col :span="6">
						<a-button type="primary" @click="getList">查询</a-button>
						<a-button style="margin: 0 8px" @click="reset">重置</a-button>
					</a-col>
				</a-row>
			</a-form>
		</a-card>
		<a-collapse v-model:activeKey="activeKey" :bordered="false" class="mt-2">
			<template #expandIcon="{ isActive }">
				<caret-right-outlined :rotate="isActive ? 90 : 0" />
			</template>
			<a-collapse-panel key="1" header="项目汇总" class="collapse-panel">
				<a-table
					:scroll="{ x: 'max-content' }"
					:columns="columns1"
					:data-source="list1"
					:pagination="false"
					bordered
					:loading="tableLoading"
					size="small"
				>
					<template #bodyCell="{ column, record, text, index }"> </template>
				</a-table>
			</a-collapse-panel>
			<a-collapse-panel key="2" header="项目分解" class="collapse-panel">
				<a-table
					:scroll="{ x: 'max-content' }"
					:columns="columns2"
					:data-source="list2"
					:pagination="false"
					bordered
					:loading="tableLoading"
					size="small"
				>
					<template #bodyCell="{ column, record, text, index }"> </template>
				</a-table>
			</a-collapse-panel>
			<a-collapse-panel key="3" header="调解员通话时长" class="collapse-panel">
				<a-table
					:scroll="{ x: 'max-content', y: 300 }"
					:columns="columns3"
					:data-source="list3"
					:pagination="false"
					bordered
					:loading="tableLoading1"
					size="small"
				>
					<template #bodyCell="{ column, record, text, index }">
						<span v-if="column.dataIndex === 'callStatus'"> {{ record.connectNum }}/{{ record.calloutNum }} </span>
					</template>
				</a-table>
			</a-collapse-panel>
			<a-collapse-panel key="4" header="图表统计" class="collapse-panel">
				<statisChart ref="chartRef" />
			</a-collapse-panel>
		</a-collapse>
	</div>
</template>
<script setup name="productionBoard">
	import ProjectMultiSelect from '@/components/Tjzy/ProjectMultiSelect/index.vue'
	import dayjs from 'dayjs'
	import statisChart from '@/views/bi/dataBoard/production/statisChart.vue'
	import productionApi from '@/api/bi/dataBoard/production/productionApi'
	import statisMediatorApi from '@/api/bi/dataBoard/production/statisMediatorApi'

	// ===========================================DATA======================================================
	//项目总计相关--------------
	const columns1 = [
		{
			title: '人力',
			dataIndex: 'field0',
			children: [
				{
					title: '出勤人力',
					dataIndex: 'attendUser'
				},
				{
					title: '在线人力',
					dataIndex: 'debtUser'
				}
			]
		},
		{
			title: '案件量',
			dataIndex: 'field1',
			children: [
				{
					title: '在催案件量',
					dataIndex: 'caseLoad'
				},
				{
					title: '人均案件量',
					dataIndex: 'avgCase'
				}
			]
		},
		{
			title: '工作量',
			dataIndex: 'field2',
			children: [
				{
					title: '外呼总量',
					dataIndex: 'calloutNum'
				},
				{
					title: '接通总量',
					dataIndex: 'connectNum'
				},
				{
					title: '接通总时长(min)',
					dataIndex: 'connectDuration'
				},
				{
					title: '有效通话总时长(min)',
					dataIndex: 'effectDuration'
				},
				{
					title: '人均拨打量',
					dataIndex: 'avgCallout',
					customRender: ({ text }) => {
						return text.toFixed(0)
					}
				},
				{
					title: '人均通话时长(min)',
					dataIndex: 'avgConnectDuration',
					customRender: ({ text }) => {
						return text.toFixed(0)
					}
				},
				{
					title: '人均有效通话时长(min)',
					dataIndex: 'avgEffectDuration',
					customRender: ({ text }) => {
						return text.toFixed(0)
					}
				}
			]
		},
		{
			title: '工作效率',
			dataIndex: 'field3',
			children: [
				{
					title: '接通率',
					dataIndex: 'rateConnect',
					customRender: ({ text }) => {
						return `${(text * 100).toFixed(2)}%`
					}
				},
				{
					title: '活跃率',
					dataIndex: 'rateActive',
					customRender: ({ text }) => {
						return `${(text * 100).toFixed(2)}%`
					}
				},
				{
					title: '平均活跃率',
					dataIndex: 'rateAvgActive',
					customRender: ({ text }) => {
						return `${(text * 100).toFixed(2)}%`
					}
				}
			]
		}
	]
	let list1 = ref([])
	//项目分解相关--------------
	let list2 = ref([])
	const columns2 = [
		{
			title: '项目名称',
			dataIndex: 'projectName'
		},
		{
			title: '人力',
			dataIndex: 'field0',
			children: [
				{
					title: '出勤人力',
					dataIndex: 'attendUser'
				},
				{
					title: '在线人力',
					dataIndex: 'debtUser'
				}
			]
		},
		{
			title: '案件量',
			dataIndex: 'field1',
			children: [
				{
					title: '在催案件量',
					dataIndex: 'caseLoad'
				},
				{
					title: '人均案件量',
					dataIndex: 'avgCase'
				}
			]
		},
		{
			title: '工作量',
			dataIndex: 'field2',
			children: [
				{
					title: '外呼总量',
					dataIndex: 'calloutNum'
				},
				{
					title: '接通总量',
					dataIndex: 'connectNum'
				},
				{
					title: '接通总时长(min)',
					dataIndex: 'connectDuration'
				},
				{
					title: '有效通话总时长(min)',
					dataIndex: 'effectDuration'
				},
				{
					title: '人均拨打量',
					dataIndex: 'avgCallout',
					customRender: ({ text }) => {
						return text.toFixed(0)
					}
				},
				{
					title: '人均通话时长(min)',
					dataIndex: 'avgConnectDuration',
					customRender: ({ text }) => {
						return text.toFixed(0)
					}
				},
				{
					title: '人均有效通话时长(min)',
					dataIndex: 'avgEffectDuration',
					customRender: ({ text }) => {
						return text.toFixed(0)
					}
				}
			]
		},
		{
			title: '工作效率',
			dataIndex: 'field3',
			children: [
				{
					title: '接通率',
					dataIndex: 'rateConnect',
					customRender: ({ text }) => {
						return `${(text * 100).toFixed(2)}%`
					}
				},
				{
					title: '活跃率',
					dataIndex: 'rateActive',
					customRender: ({ text }) => {
						return `${(text * 100).toFixed(2)}%`
					}
				},
				{
					title: '平均活跃率',
					dataIndex: 'rateAvgActive',
					customRender: ({ text }) => {
						return `${(text * 100).toFixed(2)}%`
					}
				}
			]
		}
	]
	//调解员列表
	let list3 = ref([])
	const columns3 = [
		{
			title: '调解员',
			dataIndex: 'agentName',
			width: 120,
			ellipsis: true
		},
		{
			title: '所属团队',
			dataIndex: 'belongTeam',
			width: 150,
			ellipsis: true
		},
		{
			title: '拨打情况（接通/总拨打数）',
			dataIndex: 'callStatus',
			width: 200,
			ellipsis: true
		},
		{
			title: '接通率',
			dataIndex: 'rateConnect',
			width: 120,
			ellipsis: true,
			customRender: ({ text }) => {
				return `${(text * 100).toFixed(2)}%`
			}
		},
		{
			title: '累计通话时长(min)',
			dataIndex: 'callDuration'
		},
		{
			title: '有效通话总时长(min)',
			dataIndex: 'effectDuration',
			width: 150,
			ellipsis: true
		},
		{
			title: '10秒以内通话占比',
			dataIndex: 'effectTen',
			width: 150,
			ellipsis: true,
			customRender: ({ text }) => {
				return `${(text * 100).toFixed(2)}%`
			}
		},
		{
			title: '11-30秒通话占比',
			dataIndex: 'effectThirty',
			width: 150,
			ellipsis: true,
			customRender: ({ text }) => {
				return `${(text * 100).toFixed(2)}%`
			}
		},
		{
			title: '31-60秒通话占比',
			dataIndex: 'effectSixty',
			width: 150,
			ellipsis: true,
			customRender: ({ text }) => {
				return `${(text * 100).toFixed(2)}%`
			}
		},
		{
			title: '60秒以上通话占比',
			dataIndex: 'effectMore',
			width: 150,
			ellipsis: true,
			customRender: ({ text }) => {
				return `${(text * 100).toFixed(2)}%`
			}
		}
	]
	const tableLoading = ref(false)
	const tableLoading1 = ref(false)
	const activeKey = ref([1, 2, 3, 4]) //折叠面板展开项
	const searchFormState = ref({
		belongProject: [],
		agentNum: '',
		currentTime: dayjs().format('YYYY-MM-DD')
	})
	let searchFormRef = ref()
	let updateStep = ref(15)
	const isEditUpdate = ref(false)
	let chartRef = ref()
	let interval = null
	// ===========================================LIFECYCLE HOOKS===========================================
	onMounted(() => {
		const step = updateStep.value
		getList()
		interval = setInterval(
			() => {
				getList()
			},
			1000 * 60 * step
		)
	})
	onUnmounted(() => {
		if (interval) {
			clearInterval(interval)
			interval = null
		}
	})
	// ===========================================METHODS==================================================
	const reset = () => {
		searchFormRef.value.resetFields()
		getList()
	}
	// const editUpdateStep = () => {
	// 	isEditUpdate.value = !isEditUpdate.value
	// 	if (!isEditUpdate.value) {
	// 		clearInterval(interval)
	// 		interval = null
	// 		const step = updateStep.value
	// 		interval = setInterval(
	// 			() => {
	// 				getList()
	// 			},
	// 			1000 * 60 * step
	// 		)
	// 	}
	// }
	// ===========================================REQUEST==================================================
	const getList = () => {
		tableLoading.value = true
		const data = JSON.parse(JSON.stringify(searchFormState.value))
		data.belongProject = data.belongProject.join()
		productionApi.list(data).then((res) => {
			list1.value = [res[res.length - 1]]
			list2.value = res.splice(0, res.length - 1)
			tableLoading.value = false
		})
		getAgentList(data)
		nextTick(() => {
			chartRef.value.getData(data)
		})
	}
	const getAgentList = (data) => {
		tableLoading1.value = true
		statisMediatorApi.list(data).then((res) => {
			list3.value = res
			tableLoading1.value = false
		})
	}
</script>
<style lang="less" scoped>
	.update-step {
		display: flex;
		align-items: center;
		justify-content: start;
		:deep(.ant-input) {
			width: 80px;
		}
	}
	:deep(.ant-collapse) {
		.ant-collapse-item {
			background: #fff;
			border-radius: 4px;
			margin-bottom: 8px;
			border: 0;
			overflow: hidden;
			.ant-collapse-header-text {
				font-size: 16px;
				font-weight: 600;
			}
		}
	}
</style>
